<template>
    <div class="image-box">
        <div class="image-null"  ref="viewContent">
<!--            <Images-->
<!--                    v-if="!sub"-->
<!--                    :data="img"-->
<!--            ></Images>-->
        </div>
        <el-button @click="savePageData">提交页面</el-button>
        <el-button @click="restorePageData">恢复页面</el-button>



    </div>
<!--    <div class="submit-btn">-->
<!--        <el-button @click="savePageData">提交页面</el-button>-->
<!--        <el-button @click="restorePageData">恢复页面</el-button>-->
<!--    </div>-->

</template>

<script>
    import Images from '@/components/View/Images'
    export default {
        components: {
            Images
        },
        data() {
            return {
                img: { "type": "images", "data": [], "options": {}, "class": {} },
                name: 'Images',
                sub : false,
                savedElements : [{"tag":"div","text":"","styles":{"position":"static","top":"8px","left":"935px","width":"50px","height":"300px","backgroundColor":"rgba(0, 0, 0, 0)","color":"rgb(193, 193, 193)","fontSize":"0px","border":"0px none rgb(193, 193, 193)","borderRadius":"0px","zIndex":"auto"},"attributes":{"data-v-267a8e42":"","data-v-0c873172":"","class":"image-box"}},{"tag":"div","text":"","styles":{"position":"static","top":"8px","left":"935px","width":"50px","height":"300px","backgroundColor":"rgb(255, 255, 255)","color":"rgb(193, 193, 193)","fontSize":"50px","border":"0px none rgb(193, 193, 193)","borderRadius":"0px","zIndex":"auto"},"attributes":{"data-v-267a8e42":"","class":"image-null"}},{"tag":"span","text":"","styles":{"position":"static","top":"133px","left":"935px","width":"50px","height":"50px","backgroundColor":"rgba(0, 0, 0, 0)","color":"rgb(193, 193, 193)",
                "fontSize":"50px","border":"0px none rgb(193, 193, 193)","borderRadius":"0px","zIndex":"auto"},"attributes":{"data-v-267a8e42":"","class":"el-icon-picture"}}]
            }
        },
        methods: {
            savePageData() {
                this.sub = true;
                const elements = this.$refs.viewContent.querySelectorAll("*");
                const result = Array.from(elements).map((el) => {
                    const computedStyle = window.getComputedStyle(el);
                    const rect = el.getBoundingClientRect();

                    return {
                        tag: el.tagName.toLowerCase(), // 元素类型
                        text: el.innerText, // 元素内容
                        styles: {
                            position: computedStyle.position,
                            top: rect.top + "px",
                            left: rect.left + "px",
                            width: rect.width + "px",
                            height: rect.height + "px",
                            backgroundColor: computedStyle.backgroundColor,
                            color: computedStyle.color,
                            fontSize: computedStyle.fontSize,
                            border: computedStyle.border,
                            borderRadius: computedStyle.borderRadius,
                            zIndex: computedStyle.zIndex,
                        },
                        attributes: Array.from(el.attributes).reduce((acc, attr) => {
                            acc[attr.name] = attr.value;
                            return acc;
                        }, {}),
                    };
                });

                this.savedElements = result; // 存储数据
                console.log("保存的数据：", JSON.stringify(result));
            },
            restorePageData() {
                const viewContent = this.$refs.viewContent;
                viewContent.innerHTML = ''; // 清空现有内容

                this.savedElements.forEach((elementData) => {
                    const el = document.createElement(elementData.tag);
                    el.innerText = elementData.text;

                    Object.keys(elementData.styles).forEach((styleKey) => {
                        el.style[styleKey] = elementData.styles[styleKey];
                    });

                    Object.keys(elementData.attributes).forEach((attrKey) => {
                        el.setAttribute(attrKey, elementData.attributes[attrKey]);
                    });

                    viewContent.appendChild(el);
                });
            },
        }
    }
</script>

<style lang="scss" scoped>
    .image-box{
        font-size: 0;
        img{
            width: 100%;
            max-width: 100%;
        }
        .image-null{
            background: #ffffff;
            height: 300px;
            font-size: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #c1c1c1;
            width: 100%;
        }
        a{
            display: block;
        }
        &.two{
            display: flex;
            flex-wrap: wrap;
            box-sizing: content-box;
            a{
                width: 50%;
                box-sizing: border-box;
                position: relative;
                overflow: hidden;
                display: block;
                padding-bottom: 50%;
                background: #e4e4e4;
                img{
                    position: absolute;
                }
            }
        }
        &.three{
            height: 100px;
            overflow-y: auto;
            white-space: nowrap;
            box-sizing: content-box;
            a{
                width: 100px;
                height: 100px;
                margin: 0 4px;
                display: inline-block;
                vertical-align: bottom;
                background: #e4e4e4;
            }
        }
    }
</style>
